import React, {Component} from 'react';
import {View, Text, Button, ActionSheet, Colors, Image} from 'react-native-ui-lib';
import {gestureHandlerRootHOC} from 'react-native-gesture-handler';
import {TestCase, TestSuite} from '@rnoh/testerino';
import { Alert } from 'react-native';

const collectionsIcon = require('../../assets/icons/collections.png');
const starIcon = require('../../assets/icons/star.png');
const shareIcon = require('../../assets/icons/share.png');
const deleteIcon = require('../../assets/icons/delete.png');

class ActionSheetScreen extends Component {
  state = {
    // --- 原有状态 ---
    showCancelIndex0: false,
    showCancelIndex3: false,
    pickedCancelIndex0: '',
    pickedCancelIndex3: '',
    showDestructive0: false,
    showDestructive1: false,
    pickedDestructive0: '',
    pickedDestructive1: '',
    showContainerStyle1: false,
    showContainerStyle2: false,
    showDialogStyle1: false,
    showDialogStyle2: false,
    showMessage1: false,
    showMessage2: false,
    showOptions1: false,
    showOptions2: false,
    showOptionsStyle1: false,
    showOptionsStyle2: false,
    showTitle1: false,
    showTitle2: false,
    showNative: false,
    showCustom: false,
    showSafeArea1: false,
    showSafeArea2: false,
    showComprehensive: false,
    pickedComprehensive: '',
    
    // --- 补充状态 (用于回调演示和新属性) ---
    showCallbackDemo: false,
    onDismissCount1: 0,
    onModalDismissedCount: 0,
    showRenderTitle: false,
    showRenderAction: false,
    showNativeCancel: false,
  };

  render() {
    const {
      showCancelIndex0,
      showCancelIndex3,
      pickedCancelIndex0,
      pickedCancelIndex3,
      showDestructive0,
      showDestructive1,
      pickedDestructive0,
      pickedDestructive1,
      showContainerStyle1,
      showContainerStyle2,
      showDialogStyle1,
      showDialogStyle2,
      showMessage1,
      showMessage2,
      showOptions1,
      showOptions2,
      showOptionsStyle1,
      showOptionsStyle2,
      showTitle1,
      showTitle2,
      showNative,
      showCustom,
      showSafeArea1,
      showSafeArea2,
      // --- 新增状态解构 ---
      showCallbackDemo,
      onDismissCount1,
      onModalDismissedCount,
      showRenderTitle,
      showRenderAction,
      showNativeCancel,
    } = this.state;

    return (
      <TestSuite name="ActionSheet">
        {/* ==================== 原有测试用例 ==================== */}
        
        <TestCase itShould="ActionSheet: 无 cancelButtonIndex (所有按钮在主列表)">
          <View padding-20>
            <Button
              label="打开 ActionSheet"
              onPress={() => this.setState({showCancelIndex0: true})}
            />
            {pickedCancelIndex0 && (
              <Text marginT-10>选择了: {pickedCancelIndex0}</Text>
            )}
            <ActionSheet
              title="所有按钮在主列表"
              options={[
                {
                  label: '选项 1',
                  onPress: () => this.setState({pickedCancelIndex0: '选项 1'}),
                },
                {
                  label: '选项 2',
                  onPress: () => this.setState({pickedCancelIndex0: '选项 2'}),
                },
                {
                  label: '选项 3',
                  onPress: () => this.setState({pickedCancelIndex0: '选项 3'}),
                },
                {
                  label: '取消',
                  onPress: () => this.setState({pickedCancelIndex0: '取消'}),
                },
              ]}
              visible={showCancelIndex0}
              onDismiss={() => this.setState({showCancelIndex0: false})}
            />
          </View>
        </TestCase>

        <TestCase itShould="ActionSheet: cancelButtonIndex=4">
          <View padding-20>
            <Button
              label="打开 ActionSheet"
              onPress={() => this.setState({showCancelIndex3: true})}
            />
            {pickedCancelIndex3 && (
              <Text marginT-10>选择了: {pickedCancelIndex3}</Text>
            )}
            <ActionSheet
              title="取消按钮分离显示"
              cancelButtonIndex={4}
              options={[
                {
                  label: '选项 1',
                  onPress: () => this.setState({pickedCancelIndex3: '选项 1'}),
                },
                {
                  label: '选项 2',
                  onPress: () => this.setState({pickedCancelIndex3: '选项 2'}),
                },
                {
                  label: '选项 3',
                  onPress: () => this.setState({pickedCancelIndex3: '选项 3'}),
                },
                {
                  label: '取消',
                  onPress: () => this.setState({pickedCancelIndex3: '取消'}),
                },
              ]}
              visible={showCancelIndex3}
              onDismiss={() => this.setState({showCancelIndex3: false})}
            />
          </View>
        </TestCase>

        <TestCase itShould="ActionSheet: 无 destructiveButtonIndex (普通按钮)">
          <View padding-20>
            <Button
              label="打开 ActionSheet"
              onPress={() => this.setState({showDestructive0: true})}
            />
            {pickedDestructive0 && (
              <Text marginT-10>选择了: {pickedDestructive0}</Text>
            )}
            <ActionSheet
              title="普通按钮样式"
              cancelButtonIndex={4}
              options={[
                {
                  label: '删除',
                  onPress: () => this.setState({pickedDestructive0: '删除'}),
                },
                {
                  label: '编辑',
                  onPress: () => this.setState({pickedDestructive0: '编辑'}),
                },
                {
                  label: '分享',
                  onPress: () => this.setState({pickedDestructive0: '分享'}),
                },
                {
                  label: '取消',
                  onPress: () => this.setState({pickedDestructive0: '取消'}),
                },
              ]}
              visible={showDestructive0}
              onDismiss={() => this.setState({showDestructive0: false})}
            />
          </View>
        </TestCase>

        <TestCase itShould="ActionSheet: destructiveButtonIndex=0 (删除按钮红色)">
          <View padding-20>
            <Button
              label="打开 ActionSheet"
              onPress={() => this.setState({showDestructive1: true})}
            />
            {pickedDestructive1 && (
              <Text marginT-10>选择了: {pickedDestructive1}</Text>
            )}
            <ActionSheet
              title="删除操作"
              destructiveButtonIndex={0}
              cancelButtonIndex={4}
              options={[
                {
                  label: '删除',
                  onPress: () => this.setState({pickedDestructive1: '删除'}),
                },
                {
                  label: '编辑',
                  onPress: () => this.setState({pickedDestructive1: '编辑'}),
                },
                {
                  label: '分享',
                  onPress: () => this.setState({pickedDestructive1: '分享'}),
                },
                {
                  label: '取消',
                  onPress: () => this.setState({pickedDestructive1: '取消'}),
                },
              ]}
              visible={showDestructive1}
              onDismiss={() => this.setState({showDestructive1: false})}
            />
          </View>
        </TestCase>

        <TestCase itShould="ActionSheet: containerStyle (蓝色背景 + 圆角)">
          <View padding-20>
            <Button
              label="打开 ActionSheet"
              onPress={() => this.setState({showContainerStyle1: true})}
            />
            <ActionSheet
              title="自定义容器样式"
              message="蓝色背景 + 圆角 20"
              containerStyle={{
                backgroundColor: Colors.blue70,
                borderRadius: 20,
                padding: 15,
              }}
              options={[
                {label: '选项 1', onPress: () => {}},
                {label: '选项 2', onPress: () => {}},
                {label: '取消', onPress: () => {}},
              ]}
              cancelButtonIndex={3}
              visible={showContainerStyle1}
              onDismiss={() => this.setState({showContainerStyle1: false})}
            />
          </View>
        </TestCase>

        <TestCase itShould="ActionSheet: containerStyle (绿色背景 + 边框)">
          <View padding-20>
            <Button
              label="打开 ActionSheet"
              onPress={() => this.setState({showContainerStyle2: true})}
            />
            <ActionSheet
              title="自定义容器样式"
              message="绿色背景 + 边框"
              containerStyle={{
                backgroundColor: Colors.green70,
                borderWidth: 3,
                borderColor: Colors.green30,
                padding: 20,
              }}
              options={[
                {label: '选项 1', onPress: () => {}},
                {label: '选项 2', onPress: () => {}},
                {label: '取消', onPress: () => {}},
              ]}
              cancelButtonIndex={3}
              visible={showContainerStyle2}
              onDismiss={() => this.setState({showContainerStyle2: false})}
            />
          </View>
        </TestCase>

        <TestCase itShould="ActionSheet: dialogStyle (紫色背景 + 阴影)">
          <View padding-20>
            <Button
              label="打开 ActionSheet"
              onPress={() => this.setState({showDialogStyle1: true})}
            />
            <ActionSheet
              title="自定义对话框样式"
              message="紫色背景 + 阴影效果"
              dialogStyle={{
                backgroundColor: Colors.purple70,
                shadowColor: Colors.black,
                shadowOpacity: 0.5,
                shadowRadius: 10,
                elevation: 10,
              }}
              options={[
                {label: '选项 1', onPress: () => {}},
                {label: '选项 2', onPress: () => {}},
                {label: '取消', onPress: () => {}},
              ]}
              cancelButtonIndex={3}
              visible={showDialogStyle1}
              onDismiss={() => this.setState({showDialogStyle1: false})}
            />
          </View>
        </TestCase>

        <TestCase itShould="ActionSheet: dialogStyle (橙色背景 + 圆角)">
          <View padding-20>
            <Button
              label="打开 ActionSheet"
              onPress={() => this.setState({showDialogStyle2: true})}
            />
            <ActionSheet
              title="自定义对话框样式"
              message="橙色背景 + 大圆角"
              dialogStyle={{
                backgroundColor: Colors.orange70,
                borderRadius: 30,
                margin: 20,
              }}
              options={[
                {label: '选项 1', onPress: () => {}},
                {label: '选项 2', onPress: () => {}},
                {label: '取消', onPress: () => {}},
              ]}
              cancelButtonIndex={3}
              visible={showDialogStyle2}
              onDismiss={() => this.setState({showDialogStyle2: false})}
            />
          </View>
        </TestCase>

        <TestCase itShould="ActionSheet: message (短消息)">
          <View padding-20>
            <Button
              label="打开 ActionSheet"
              onPress={() => this.setState({showMessage1: true})}
            />
            <ActionSheet
              title="提示"
              message="这是一条简短的消息"
              options={[
                {label: '确定', onPress: () => {}},
                {label: '取消', onPress: () => {}},
              ]}
              cancelButtonIndex={3}
              visible={showMessage1}
              onDismiss={() => this.setState({showMessage1: false})}
            />
          </View>
        </TestCase>

        <TestCase itShould="ActionSheet: message (长消息)">
          <View padding-20>
            <Button
              label="打开 ActionSheet"
              onPress={() => this.setState({showMessage2: true})}
            />
            <ActionSheet
              title="详细说明"
              message="这是一条很长的消息，用于详细说明当前操作的具体内容和可能产生的影响。请仔细阅读后再做出选择。"
              options={[
                {label: '我已了解', onPress: () => {}},
                {label: '取消', onPress: () => {}},
              ]}
              cancelButtonIndex={2}
              visible={showMessage2}
              onDismiss={() => this.setState({showMessage2: false})}
            />
          </View>
        </TestCase>

        <TestCase itShould="ActionSheet: options (3个选项)">
          <View padding-20>
            <Button
              label="打开 ActionSheet"
              onPress={() => this.setState({showOptions1: true})}
            />
            <ActionSheet
              title="选择操作"
              options={[
                {label: '选项 1', onPress: () => {}},
                {label: '选项 2', onPress: () => {}},
                {label: '取消', onPress: () => {}},
              ]}
              cancelButtonIndex={3}
              visible={showOptions1}
              onDismiss={() => this.setState({showOptions1: false})}
            />
          </View>
        </TestCase>

        <TestCase itShould="ActionSheet: options (5个选项 + 图标)">
          <View padding-20>
            <Button
              label="打开 ActionSheet"
              onPress={() => this.setState({showOptions2: true})}
            />
            <ActionSheet
              title="更多操作"
              options={[
                {label: '收藏', iconSource: starIcon, onPress: () => {}},
                {label: '分享', iconSource: shareIcon, onPress: () => {}},
                {label: '相册', iconSource: collectionsIcon, onPress: () => {}},
                {label: '删除', iconSource: deleteIcon, onPress: () => {}},
                {label: '取消', onPress: () => {}},
              ]}
              cancelButtonIndex={5}
              destructiveButtonIndex={4}
              visible={showOptions2}
              onDismiss={() => this.setState({showOptions2: false})}
            />
          </View>
        </TestCase>

        <TestCase itShould="ActionSheet: optionsStyle (大字体 + 间距)">
          <View padding-20>
            <Button
              label="打开 ActionSheet"
              onPress={() => this.setState({showOptionsStyle1: true})}
            />
            <ActionSheet
              title="自定义选项样式"
              optionsStyle={{
                padding: 20,
                marginVertical: 5,
              }}
              options={[
                {label: '选项 1', onPress: () => {}},
                {label: '选项 2', onPress: () => {}},
                {label: '取消', onPress: () => {}},
              ]}
              cancelButtonIndex={3}
              visible={showOptionsStyle1}
              onDismiss={() => this.setState({showOptionsStyle1: false})}
            />
          </View>
        </TestCase>

        <TestCase itShould="ActionSheet: optionsStyle (背景色 + 圆角)">
          <View padding-20>
            <Button
              label="打开 ActionSheet"
              onPress={() => this.setState({showOptionsStyle2: true})}
            />
            <ActionSheet
              title="自定义选项样式"
              optionsStyle={{
                backgroundColor: Colors.green70,
                borderRadius: 10,
                marginHorizontal: 10,
                marginVertical: 3,
              }}
              options={[
                {label: '选项 1', onPress: () => {}},
                {label: '选项 2', onPress: () => {}},
                {label: '取消', onPress: () => {}},
              ]}
              cancelButtonIndex={3}
              visible={showOptionsStyle2}
              onDismiss={() => this.setState({showOptionsStyle2: false})}
            />
          </View>
        </TestCase>

        <TestCase itShould="ActionSheet: title (简短标题)">
          <View padding-20>
            <Button
              label="打开 ActionSheet"
              onPress={() => this.setState({showTitle1: true})}
            />
            <ActionSheet
              title="提示"
              message="这是消息内容"
              options={[
                {label: '确定', onPress: () => {}},
                {label: '取消', onPress: () => {}},
              ]}
              cancelButtonIndex={2}
              visible={showTitle1}
              onDismiss={() => this.setState({showTitle1: false})}
            />
          </View>
        </TestCase>

        <TestCase itShould="ActionSheet: title (详细标题)">
          <View padding-20>
            <Button
              label="打开 ActionSheet"
              onPress={() => this.setState({showTitle2: true})}
            />
            <ActionSheet
              title="确认删除此项目吗？"
              message="删除后将无法恢复"
              options={[
                {label: '确认删除', onPress: () => {}},
                {label: '取消', onPress: () => {}},
              ]}
              destructiveButtonIndex={0}
              cancelButtonIndex={2}
              visible={showTitle2}
              onDismiss={() => this.setState({showTitle2: false})}
            />
          </View>
        </TestCase>

        <TestCase itShould="ActionSheet: useNativeIOS=false (自定义样式)">
          <View padding-20>
            <Button
              label="打开 ActionSheet"
              onPress={() => this.setState({showCustom: true})}
            />
            <ActionSheet
              title="自定义 ActionSheet"
              message="useNativeIOS=false"
              useNativeIOS={false}
              options={[
                {label: '选项 1', onPress: () => {}},
                {label: '选项 2', onPress: () => {}},
                {label: '取消', onPress: () => {}},
              ]}
              cancelButtonIndex={3}
              visible={showCustom}
              onDismiss={() => this.setState({showCustom: false})}
            />
          </View>
        </TestCase>

        <TestCase itShould="ActionSheet: useNativeIOS=true (iOS 原生)">
          <View padding-20>
            <Button
              label="打开 ActionSheet"
              onPress={() => this.setState({showNative: true})}
            />
            <ActionSheet
              title="原生 iOS ActionSheet"
              message="useNativeIOS=true"
              useNativeIOS={true}
              options={[
                {label: '选项 1', onPress: () => {}},
                {label: '选项 2', onPress: () => {}},
                {label: '取消', onPress: () => {}},
              ]}
              cancelButtonIndex={3}
              visible={showNative}
              onDismiss={() => this.setState({showNative: false})}
            />
          </View>
        </TestCase>

        <TestCase itShould="ActionSheet: useSafeArea=false">
          <View padding-20>
            <Button
              label="打开 ActionSheet"
              onPress={() => this.setState({showSafeArea1: true})}
            />
            <ActionSheet
              title="不使用安全区域"
              message="useSafeArea=false"
              useSafeArea={false}
              options={[
                {label: '选项 1', onPress: () => {}},
                {label: '选项 2', onPress: () => {}},
                {label: '取消', onPress: () => {}},
              ]}
              cancelButtonIndex={3}
              visible={showSafeArea1}
              onDismiss={() => this.setState({showSafeArea1: false})}
            />
          </View>
        </TestCase>

        <TestCase itShould="ActionSheet: useSafeArea=true">
          <View padding-20>
            <Button
              label="打开 ActionSheet"
              onPress={() => this.setState({showSafeArea2: true})}
            />
            <ActionSheet
              title="使用安全区域"
              message="useSafeArea=true"
              useSafeArea={true}
              options={[
                {label: '选项 1', onPress: () => {}},
                {label: '选项 2', onPress: () => {}},
                {label: '取消', onPress: () => {}},
              ]}
              cancelButtonIndex={3}
              visible={showSafeArea2}
              onDismiss={() => this.setState({showSafeArea2: false})}
            />
          </View>
        </TestCase>

        <TestCase itShould="ActionSheet: 回调演示 (onDismiss & onModalDismissed)">
          <View padding-20>
            <Text text70 marginB-10 color={Colors.blue30}>
              onDismiss 触发次数: {onDismissCount1}
            </Text>
            <Text text70 marginB-20 color={Colors.red30}>
              onModalDismissed 触发次数: {onModalDismissedCount}
            </Text>
            
            <Button
              label="打开并测试回调"
              onPress={() => this.setState({showCallbackDemo: true})}
            />
            <ActionSheet
              title="回调测试"
              message="关闭此弹窗将触发回调计数+1"
              options={[
                {label: '选项 A', onPress: () => {}},
                {label: '选项 B', onPress: () => {}},
                {label: '取消', onPress: () => {}},
              ]}
              cancelButtonIndex={3}
              visible={showCallbackDemo}
              // onDismiss: 关闭操作表时调用
              onDismiss={() => 
                this.setState(prev => ({
                  showCallbackDemo: false,
                  onDismissCount1: prev.onDismissCount1 + 1
                }))
              }
              onModalDismissed={() => 
                this.setState(prev => ({
                  onModalDismissedCount: prev.onModalDismissedCount + 1
                }))
              }
            />
          </View>
        </TestCase>

        <TestCase itShould="ActionSheet: renderTitle (自定义标题视图)">
          <View padding-20>
            <Button
              label="自定义标题视图"
              onPress={() => this.setState({showRenderTitle: true})}
            />
            <ActionSheet
              visible={showRenderTitle}
              onDismiss={() => this.setState({showRenderTitle: false})}
              cancelButtonIndex={2}
              renderTitle={() => (
                <View padding-20 bg-grey80 style={{alignItems: 'center', borderTopLeftRadius: 15, borderTopRightRadius: 15}}>
                  <Image source={starIcon} style={{width: 30, height: 30, tintColor: Colors.yellow30, marginBottom: 10}}/>
                  <Text text60 color={Colors.blue30}>自定义标题组件</Text>
                  <Text text80 color={Colors.grey40} marginT-5>这是通过 renderTitle 渲染的完全自定义视图</Text>
                </View>
              )}
              options={[
                {label: '确认', onPress: () => {}},
                {label: '取消', onPress: () => {}},
              ]}
            />
          </View>
        </TestCase>

        <TestCase itShould="ActionSheet: renderAction (自定义选项视图)">
          <View padding-20>
            <Button
              label="自定义选项视图"
              onPress={() => this.setState({showRenderAction: true})}
            />
            <ActionSheet
              visible={showRenderAction}
              title="自定义选项渲染"
              onDismiss={() => this.setState({showRenderAction: false})}
              options={[
                {label: '自定义选项 1', onPress: () => Alert.alert('点击了选项 1')},
                {label: '自定义选项 2', onPress: () => Alert.alert('点击了选项 2')},
                {label: '取消', onPress: () => {}},
              ]}
              cancelButtonIndex={3}
              renderAction={(option, index, onOptionPress) => (
                <View key={index} padding-15 style={{borderBottomWidth: 1, borderBottomColor: Colors.grey60, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center'}}>
                  <Text text70 color={Colors.purple30} style={{fontWeight: 'bold'}}>#{index + 1} {option.label}</Text>
                  <Button 
                    size={Button.sizes.xSmall} 
                    label="点击" 
                    onPress={() => onOptionPress(index)} 
                    backgroundColor={Colors.purple30}
                  />
                </View>
              )}
            />
          </View>
        </TestCase>

        <TestCase itShould="ActionSheet: showCancelButton (仅iOS原生: 强制显示取消按钮)">
          <View padding-20>
            <Button
              label="iOS 原生取消按钮"
              onPress={() => this.setState({showNativeCancel: true})}
            />
            <ActionSheet
              title="iOS 原生特性"
              message="showCancelButton=true (覆盖 cancelButtonIndex)"
              useNativeIOS={true}
              showCancelButton={true}
              options={[
                {label: '选项 1', onPress: () => {}},
                {label: '选项 2', onPress: () => {}},
              ]}
              visible={showNativeCancel}
              onDismiss={() => this.setState({showNativeCancel: false})}
            />
          </View>
        </TestCase>

      </TestSuite>
    );
  }
}

export default gestureHandlerRootHOC(ActionSheetScreen);